<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
{include file="system@block/layui" /}

<div id="box">
<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="会员">
     <el-select v-model="form.user_id" filterable placeholder="请选择会员">
      <el-option v-for="item in users" :label="item.nick" :value="item.id"></el-option>
    </el-select>
  </el-form-item>


  <el-form-item label="顾问">
     <el-select v-model="form.adviser_id" placeholder="请选择顾问">
      <el-option v-for="item in adviserArr" :label="item.nick" :value="item.id"></el-option>
    </el-select>
  </el-form-item>


  <el-form-item label="美容师">
    <el-select v-model="form.technician_ids" multiple placeholder="请选择美容师">
        <el-option
        v-for="item in technicians"
        :key="item.value"
        :label="item.name"
        :value="item.value">
        </el-option>
    </el-select>
  </el-form-item>

    <el-form-item label="收银">
     <el-select v-model="form.cashier_id" placeholder="请选择收银">
      <el-option v-for="item in cashiers" :label="item.nick" :value="item.id"></el-option>
    </el-select>
  </el-form-item>



<el-table :data="form.productData">

    <el-table-column
      label="产品名称"
      width="180">
      <template slot-scope="scope">
            <el-select v-model="scope.row.id" filterable  @change="proSelect(scope.$index)" placeholder="请选择产品">
                  <el-option v-for="item,idx in products" :label="item.name" :value="item.id" :key="idx"></el-option>
            </el-select>
      </template>
    </el-table-column>
        <el-table-column
      label="数量"
      width="150">
      <template slot-scope="scope">
       <el-input-number v-model="scope.row.num" size="small" :min="0" @change="setProduct_price(scope.row, $event)"></el-input-number>
      </template>
    </el-table-column>

 <el-table-column
      label="金额"
      width="150">
      <template slot-scope="scope">
       <el-input v-model="scope.row.price2" size="small" :min="1" ></el-input>
      </template>
    </el-table-column>
    <el-table-column
    label="仓库"
    width="150">
    <template slot-scope="scope">
      <el-select v-model="scope.row.warehouse_id" filterable placeholder="请选择仓库">
        <el-option v-for="item,idx in warehouses" :label="item.name" :value="item.id" :key="item.id"></el-option>
    </el-select>
    </template>
  </el-table-column>
    <el-table-column label='操作'>
    <template slot-scope="scope">
       <el-button @click.prevent="removeItem(scope.$index)">删除</el-button>
      </template>
    </el-table-column>
</el-table>

    <el-form-item label="退款金额">
        <!-- <el-input placeholder="0.00" v-model=""> </el-input> -->
        {{form.price}}
    </el-form-item>

  <el-form-item label="支出账户">
     <el-select v-model="form.account_id" placeholder="请选择支出账户">
      <el-option v-for="item in accountArr" :label="item.name" :value="item.id"></el-option>
    </el-select>
  </el-form-item>

  <el-form-item >
    <el-button type="success" @click="addPro">增加产品</el-button>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button>取消</el-button>

  </el-form-item>
  </el-form>
</div>

<script>
var vm = new Vue({
    el:'#box',
    data:{
        form:{
            user_id: '',
            adviser_id: '',
            cashier_id: '',
            technician_ids: '',
            productData:[],
            account_id:'',
            price:0,
        },
        users:{:json_encode($userArr)},
        accountArr:{:json_encode($accountArr)},
        adviserArr:{:json_encode($adviserArr)},
        technicians:{:json_encode($technicians)},
        products:{:json_encode($products)},
        cashiers:{:json_encode($cashiers)},
        warehouses:{:json_encode($warehouses)},
        defaultProduct:{},
    },
    created(){
        this.defaultProduct = this.products[0];
        // console.log(this.defaultProduct);
    },
    methods:{
        onSubmit:function(){
            var that = this;
                axios.post('{:url('')}', this.form).then(function (response) {
                    if(response.data.status === true){
                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        that.$message({
                            type: 'success',
                            message: response.data.message,
                            onClose: function(){
                                parent.layer.close(index); //再执行关闭
                                window.parent.location.reload();
                            }
                        })
                    }else{
                        that.$message({
                            type: 'error',
                            message: response.data.message
                        })
                    }
                }).catch(function (error) {
                    that.$message({
                            type: 'error',
                            message: error
                        })
                });
        },
        proSelect:function(idx){
            var that = this;

            let row = that.products.filter(function(p){
                 return p.id === that.form.productData[idx].id;
             })[0];
            console.log(row)
           Object.keys(row).map(key => {

              if (key !== 'id') {
                that.$set(that.form.productData[idx], key, row[key])
              }
            })

        },
        removeItem:function(idx){
            this.form.productData.splice(idx,1);
        },
        addPro:function(){
            // console.log(this.defaultProduct)
            this.form.productData.push({
                id: Number(this.defaultProduct.id),
                name: this.defaultProduct.name,
                price2: this.defaultProduct.price2,
                num:1
            });
        },

        setProduct_price(item, num) {
            // console.log(num)
            item.price2 = (((item.price2||0)  / (item.old_number2||1)) * num).toFixed(2)
            item.old_number2 = num
        },

    },
    watch:{
        form:{
            handler:function(){
                var sum = 0
                  this.form.productData.map(i => {
                    sum +=  Number(i.price2)
                  })
                  this.form.price =  Number.isNaN(sum) ? 0 : sum
            },
            deep:true//对象内部的属性监听，也叫深度监听
        },
    }

});
</script>
